<template>  
    <div class="detail-nav-bar" >
        <nav-bar >
            <div slot="left" @click="backClick">
                {{"<"}}
            </div>
            <div slot="center" class="detail-nav-bar-div" >
                <div v-for="(item , i) in titles" 
                :key="i" 
                class="detail-nav-bar-item"
                :class="{activ : i == index}"
                @click="activItem(i)">
                    {{item}}
                </div>
            </div>
        </nav-bar>
    </div>
</template>



<script>
    import NavBar from "components/common/navbar/NavBar"

    export default {
        name:"DetailNavBar",
        data(){
            return {
                titles : ["商品","参数","评论","推荐"],
                index : 0
            }
        },
        components:{
            NavBar
        },
        methods:{
            activItem(i){
                this.index = i
                this.$emit("active",i)
            },
            backClick(){
                this.$router.back()
            }
        }
  }
</script>

<style scoped>
    .detail-nav-bar-div{
        display: flex;
        text-align: center;
    }
    .detail-nav-bar-item{
        flex : 1;
    }
    .activ {
        color:orange;
    }
</style>